<template>
    <div>
        <h2>app</h2>
        <test-slot :items="items">
            <template slot-scope="scope">
                <span>{{ scope.addr}}</span>
                <span>{{ scope.cname }}</span>
                <span>{{ scope.age }}</span>
                <span>{{ scope }}</span>
            </template>
        </test-slot>
    </div>
</template>

<script>
    import TestSlot from "../../components/testSlot/testSlot";
    export default {
        name: "slot-parent",
        components: {TestSlot},
        data (){
            return {
                items:[
                    { text:'文字1' , cname:'tom' , addr:'usa' },
                    { text:'文字2' , cname:'wangwu' , addr:'uk' },
                    { text:'文字3' , cname:'zhangsan' , addr:'un' }
                ],
                test: '222222'
            }
        },
        computed: {
            itemName: function () {
                return this.items.flatMap(node => node.cname);
            }
        },
        beforeCreate: function(){
            console.log(this);
            showData('创建vue实例前',this);
        },
        created: function(){
            showData('创建vue实例后',this);
        },
        beforeMount:function(){
            showData('挂载到dom前',this);
        },
        mounted: function(){
            showData('挂载到dom后',this);
        },
        beforeUpdate:function(){
            showData('数据变化更新前',this);
        },
        updated:function(){
            showData('数据变化更新后',this);
        },
        beforeDestroy:function(){
            this.test ="3333";
            showData('vue实例销毁前',this);
        },
        destroyed:function(){
            showData('vue实例销毁后',this);
        }
    }

    function realDom(){
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
    }
    function showData(process,obj){
        console.log(process);
        console.log('data 数据：' + obj.test)
        console.log('挂载的对象：')
        console.log(obj.$el)
        realDom();
        console.log('------------------')
        console.log('------------------')
    }

</script>

<style scoped>

</style>
